<template>
  <div>
    <div class="radio-box">
      <el-radio-group v-model="radio" @input="handleInput">
        <el-radio :label="1">我发起的</el-radio>
        <el-radio :label="2">我参与的</el-radio>
      </el-radio-group>
      <el-button type="primary" @click="handleAdd" class="addbtn">举办活动</el-button>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="主题"
          width="180">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="130">
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="state"
          label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :disabled="scope.row.state ==='未开始'" :content="scope.row.state === '未开始' ? '' : '活动已结束！'" placement="top">
              <el-button type="primary" size="mini" @click="handleCancel(scope.row.eventid)" :disabled="scope.row.state == '未开始'?false:true">取消</el-button>
            </el-tooltip>
            <el-button type="primary" size="mini" v-if="radio == 1" @click="handleCheck(scope.row.eventid)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 确认框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>确认删除/取消活动吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :current-page="params.pageNum"
        @current-change="handleCurrentChange"
        :page-size=pageInfo.pageSize
        :total="pageInfo.total"
        >
      </el-pagination>
      <!--  -->

    </div>
    <!-- 查看活动详情的表单 -->
    <el-dialog title="活动详情" :visible.sync="dialogFormVisible">
      <el-descriptions :column="2">
          <el-descriptions-item label="活动名称">{{ eventInfo.title}}</el-descriptions-item>
          <el-descriptions-item label="活动地点">{{ eventInfo.address }}{{ eventInfo.addressdetail }}</el-descriptions-item>
          <el-descriptions-item label="活动类型"><el-tag type="success">{{ eventInfo.type }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="已报名人数"><span>{{ eventInfo.signed }}</span>/<span>{{ eventInfo.size }}</span></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 发布活动 event -->
    <el-dialog title="举办活动" :visible.sync="dialogFormVisibleEvent">
      <el-form :model="eventForm.event"   label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" >
          <el-input v-model="eventForm.event.title"></el-input>
        </el-form-item>
          <el-form-item label="活动细节">
            <el-input v-model="eventForm.event.detail"></el-input>
          </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="eventForm.event.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item style="margin-left: 20px;">
              <div style="display: flex;flex-direction: row; width: 100%;">
                <div style="width: 40px;">人数</div>
                <el-input placeholder="活动人数" v-model="eventForm.event.size" style="width: 100%;"></el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" class="address-item">
            <div class="address-input">
              <el-cascader size="large" :options="pcaTextArr" v-model="eventForm.event.address"></el-cascader>
              <el-input v-model="eventForm.event.addressdetail" placeholder="详细地址"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-radio-group v-model="eventForm.event.type">
            <el-radio label="比赛"></el-radio>
            <el-radio label="公益活动"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEvent = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitEvent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {GetEventByUserId,DeleteOwn,CancelSign,CancelEvent,GetEventInfo,HoldEvent} from '@/request/api'
import { mapActions } from 'vuex'
import {pcaTextArr} from "element-china-area-data";
export default {
  data(){
    return{
      dialogFormVisible: false,
      dialogFormVisibleEvent:false,
      dialogVisible:false,
      pcaTextArr,
      formLabelWidth:'120px',
      radio:1,
      tableData: [],
      params:{
        pageNum:1,
        flag:'',
        eventid:null
      },
      pageInfo:{
      },
      pageCount:null,
      state:'',
      cancelParams:{
        eventid:null
      },
      dialogParams:{
        eventid:null
      },
      eventInfo:{},
      eventForm:{
        event:{
          title:'',
          detail:'',
          size:null,
          date:'',
          address:'',
          addressdetail:'',
          type:'比赛'
        }
      },
      
    }
  },
  computed:{
   
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    async getData(flag,pageNum){
        this.params.flag = flag
        this.params.pageNum = pageNum
        let res = await GetEventByUserId(this.params)
        this.pageInfo = res.data.data
        this.tableData = res.data.data.list
        this.pageCount = Math.ceil(res.data.data.total / 5)
    },
    async handleCurrentChange(pageNum){
      this.pageInfo.pageNum = pageNum
      if(this.radio==1){
        // 我发起的
        this.getData('1',pageNum)
      }else{
        // 我参与的
        this.getData('2',pageNum)
      }
    },
    async handleInput(label){
      this.option = label
      this.getData(label.toString(),1)
    },
    async handleDelete(index){
      this.params.eventid = index
      await DeleteOwn(this.params)
      // 重新请求数据
      if(this.radio==1){
        this.getData('1',this.params.pageNum)
      }else{
        this.getData('2',this.params.pageNum)
      }
    },
    async handleCancel(eventid){
      this.cancelParams.eventid = eventid
      this.dialogVisible = true
    },
    handleClose(){
      this.dialogVisible = false
    },
    async confirmDelete(){
      if(this.radio == 1){
        // 取消活动
        let res = await CancelEvent(this.cancelParams)
        // console.log("取消活动",res.data)
        if(res.data.state == 200){
          this.asyncChangeIsShowToast({
            type:'success',
            msg:'删除成功'
          })
        }else{
          this.asyncChangeIsShowToast({
            type:'error',
            msg:'删除失败'
          })
        }
      }else{
        // 取消报名
        let res = await CancelSign(this.cancelParams)
        // console.log("取消报名",res.data)
        if(res.data.state == 200){
          this.asyncChangeIsShowToast({
            type:'success',
            msg:'取消成功'
          })
        }else{
          this.asyncChangeIsShowToast({
            type:'error',
            msg:'取消失败'
          })
        }
      }
      this.dialogVisible = false
      // 刷新数据
      this.getData(this.radio.toString(),1)
    },
    async handleCheck(eventid){
      // 用来查看活动详情的form表单展示
      this.dialogParams.eventid = eventid
      this.dialogFormVisible = true
      // 获取活动详情
      let res = await GetEventInfo(this.dialogParams)
      this.eventInfo = res.data.data
      // console.log("eventinfo",res.data.data)
    },
    handleAdd(){
      this.dialogFormVisibleEvent = true
    },
    async handleSubmitEvent(){
      // 将address变为string
      this.eventForm.event.address = this.eventForm.event.address.toString()
      console.log("!@#",this.eventForm.event)
      // 添加活动
      let res = await HoldEvent(this.eventForm.event)
      if(res.data.state == 200){
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'添加成功'
        })
        // 刷新数据
        this.getData(this.radio.toString(),1)
      }
      this.dialogFormVisibleEvent = false
    }
  },
  async created(){
    this.getData(this.radio.toString(),1)
  }
}
</script>

<style scoped>
.radio-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 20px;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.block{
  display: flex;
  justify-content: center;
}
.addbtn{
  position: absolute;
  right: 250px;
  top: -10px;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.address-item{
  display: flex;
  /* justify-content: center; */
  align-items: center;
  position: relative;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.address-input{
  display: flex;
  width: 300px;
  flex-direction: row;
  justify-content: left;
  position: absolute;
  left: -100px;
  top: -20px;
}

</style>
